<template>
	<view class="pad-lr-20">
		<view class="pad-lr-20 pad-tb-20 radius-16 mar-top-20 bgfff" @click="goorderdetails(item.id)" v-for="item in list" :key="item.id">
			<view class="mar-top-20 top_state display-sb align-items fontSize-30">
				<text class="">{{item.return_type==1?'退款':item.return_type==2?'换货':item.return_type==3?'退货退款':'仅退款'}}</text>
				<text v-if="item.status==1"  style="color:#F6911B">待处理</text>
				<text v-if="item.status==20" style="color:#F6911B">处理中</text>
				<text v-if="item.status==30" style="color:#F6911B">已完成</text>
				<text v-if="item.status==50" style="color:#F6911B">拒绝</text>
				<text v-if="item.status==60" style="color:#F6911B">已取消</text>
			</view>
			<view class="mar-top-20 radius-16 bgfff display align-items" v-for="it in item.after_goods" :key="it.id">
				<image :src="it?.image" class="proudct-item-icon-10 radius-16" mode=""></image>
				<view class="ml20 right_width">
					<view class="text-clamp-1 fontSize-28">{{it?.name}}</view>
					<view class="display-sb align-items mar-top-20 fontSize-26">
						<text>{{it?.sku_name}}</text><text>x{{it?.num}}</text>
					</view>
					<view class="mar-top-22 fontSize-28 col-E23737"><text class="fontSize-20">￥</text>{{it?.price}}</view>
				</view>
			</view>
			<view class="mar-top-30 display-sb align-items">
				<view class="fontSize-26 col-9"></view>
				<view class="display align-items">
					<!-- <view class="pad-lr-16 pad-tb-12 fontSize-26 radius-30 col-f bg2DB295 ml20" v-if="item.return_type==2&&item.logistics_flow==4" @click.stop="_user_confirm_order(item.id)">确认收货</view> -->
					<view class="pad-lr-32 pad-tb-12 fontSize-26 radius-30 col-f bg2DB295 ml20" v-if="(item.return_type==2||item.return_type==3)&&item.logistics_flow==1" @click.stop="openshowcode(item.id)">填写单号</view>
				</view>
			</view>
		</view>
		<view class="display-ce align-items" v-if="list.length==0">
			<tm-result :showBtn="false" subTitle=" " title="暂无数据" color="#bc8c1e"></tm-result>
		</view>
		<!-- 填写寄回快递单号 -->
		<tm-overlay v-model:show="showWincode" contentAnimation>
				<view @click.stop="">
					<view class="pad-lr-28 radius-32 bgfff pop_view pad-tb-50">
						<view class="fontSize-32 mar-top-30">请填写物流公司名称</view>
						<view class="radius-16 bgf6 pad-lr-30 pad-tb-18 mar-top-10">
							<input type="text" placeholder="请填写" v-model="return_logistics_name" class="width-100" />
						</view>
						<view class="fontSize-32 mar-top-30">请填写寄回快递单号</view>
						<view class="radius-16 bgf6 pad-lr-30 pad-tb-18 mar-top-10">
							<input type="text" placeholder="请填写" v-model="express_code" class="width-100" />
						</view>
						<view class="mar-top-40 display-ce align-items">
							<view class="text-align-center fontSize-32 bg2DB295 pad-lr-88 pad-tb-18 radius-40 col-f ml40" @click="_user_add_express_code">提交</view>
						</view>
					</view>
				</view>
			</tm-overlay>
	</view>
</template>

<script lang="ts" setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import {afterList,afterSendBack} from '@/utils/api'
import { ref } from 'vue';
onLoad(()=>{
	_after_order_list()
})
onReachBottom(()=>{
	if(page.value>1){
		_after_order_list()
	}
})
const showWincode = ref(false)
const list = ref([])
const page = ref(1)
const _after_order_list =() =>{
	afterList({page:page.value,limit:10}).then(res=>{
		if(res.code==1){
			list.value = list.value.concat(res.data.afters.data)
			if(res.data.afters.data.length>0){
				page.value++
			}
		}
	})
}
//售后订单填写单号
const express_code = ref()
const return_logistics_name = ref()
const idx = ref()
const openshowcode =(id:number) =>{
	idx.value = id
	showWincode.value = true
}
const _user_add_express_code =() =>{
	afterSendBack({return_logistics_no:express_code.value,id:idx.value,return_logistics_name:return_logistics_name.value}).then(res=>{
		uni.showToast({
			icon: 'none',
			title:res.msg
		})
		if(res.code==1){
			showWincode.value = false
			list.value.forEach(item=>{
				if(item.id==idx.value){
					item.logistics_flow = 2
				}
			})
		}
	})
}
const goorderdetails = (id:number|string) =>{
	uni.navigateTo({
		url:'/mypages/orderdetails/orderdetails?type=2&id='+id
	})
}
</script>

<style lang="scss">
@import 'servicelist.scss';
</style>
